chore: upgrade dev dependencies to React 18.2#3410
Conversation
Upgrade devDependencies across all packages to React 18.2 while keeping peerDependencies at >=16.9.0 for consumer compatibility. No source code changes — library remains compatible with React 16/17/18. - Bump react/react-dom devDeps from ^16.x to ^18.2.0 (16 packages) - Upgrade @testing-library/react from ^12 to ^14 - Remove deprecated @testing-library/react-hooks (merged into @testing-library/react) - Remove @hot-loader/react-dom (unused with Vite tooling) - Bump react-is to ^18.2.0 - Fix act() wrapping in tests for React 18 automatic batching - Update snapshots for React 18 output
|
📦 Bundle Size Analysis Changed Components
Unchanged Components
📊 Summary:
|
- react-is is a runtime dependency bundled into output — keep at v16 to avoid +3.5KB per component (symbols are stable across React versions) - Wrap interaction test DOM assertions in waitFor() for React 18 batching
Import expect and waitFor from @storybook/test (unified module) instead of separate @storybook/jest import.
Code Review by Qodo
1. Invalid renderHook ReturnType typing
|
…test The hook checks document.activeElement against focusedElementRef.current (the inner input). The test was focusing the Search wrapper div found by test-id, which doesn't match — causing the hook to early-return without updating visual focus.
PR Summary by Qodochore: upgrade dev React to 18.2 + Testing Library v14; fix React 18 test timing Description
Diagram
High-Level Assessment
Files changed (57)
|
userEvent.keyboard() dispatches events based on user-event's internal focus tracking, not document.activeElement. Calling element.focus() directly doesn't update that tracking, so keyboard events were dispatched on the wrong element. Using userEvent.tab() properly updates both browser focus and user-event's tracked focus target.
| const initialStateValue = ""; | ||
| let onChangeCallbackStub: Mock; | ||
| let hookResult: RenderHookResult<unknown, UseDebounceResult>; | ||
| let hookResult: ReturnType<typeof renderHook<UseDebounceResult>>; |
There was a problem hiding this comment.
1. Invalid renderhook returntype typing 📘 Rule violation ≡ Correctness
useDebounceEvent.test.ts declares hookResult as `ReturnType<typeof renderHook<UseDebounceResult>>, but applying generic type arguments inside a typeof` type query is invalid TypeScript and can fail the test build/typecheck. This risks breaking CI and undermines the reliability of the migrated React 18 test suite.
Agent Prompt
## Issue description
`packages/core/src/hooks/__tests__/useDebounceEvent.test.ts` types `hookResult` as `ReturnType<typeof renderHook<UseDebounceResult>>`, but generic parameters cannot be applied inside a `typeof` type query, making this invalid TypeScript syntax. This can break TypeScript compilation of the test suite and block CI.
## Issue Context
This PR migrates hook tests from `@testing-library/react-hooks` to `@testing-library/react`, and the intent is to correctly type the value returned by `renderHook(...)` while keeping the tests reliable under the React 18 tooling upgrade.
## Fix Focus Areas
- packages/core/src/hooks/__tests__/useDebounceEvent.test.ts[10-10]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
|
Code review by qodo was updated up to the latest commit c9caf40 |
Summary
devDependenciesacross all 16 packages to React 18.2 while keepingpeerDependenciesat>=16.9.0— consumers on React 16/17/18 continue to work@testing-library/reactfrom v12 to v14, remove deprecated@testing-library/react-hooks@hot-loader/react-domdependencyact()wrapping in tests for React 18's stricter automatic batchingMotivation
Modernize dev tooling (Storybook, test runner) to React 18 for better DX while preserving backward compatibility for consumers still on React 16/17.
Test plan
🤖 Generated with Claude Code